<!--
 * @Author: 孙开源 && sunkaiyuan@namenode.cn
 * @Date: 2023-02-07 08:50:23
 * @LastEditors: 孙开源 && sunkaiyuan@namenode.cn
 * @LastEditTime: 2023-10-08 13:52:47
 * @Description: 
 * 
-->
<template>
  <div
    v-for="item in deflist"
    :key="item.id"
    :style="{ 'padding-left': level * 20 + 'px' }"
    class="select-group"
  >
    <el-option-group :label="selectall || !item.isgroup ? '' : item.name">
      <el-option
        v-show="selectall || !item.isgroup"
        :label="item[showfield]"
        :value="item.id"
      >
        <template #default>
          <span>{{ item[lablefield] }}</span>
        </template>
      </el-option>
      <selectGroupList
        :list="item.children ?? []"
        :level="level + 1"
        :showfield="showfield"
        :selectall="selectall"
      />
    </el-option-group>
  </div>
</template>
<script>
export default {
  name: "selectGroupList",
};
</script>
<script setup>
import { ref, watch, onMounted } from "vue";
import {} from "vue";

const props = defineProps({
  list: {
    type: Object,
    default: () => {
      return [
        {
          children: [],
        },
      ];
    },
  },
  lablefield: {
    type: String,
    default: () => "name",
  },
  showfield: {
    type: String,
    default: () => "name",
  },
  level: {
    type: Number,
    default: () => 0,
  },
  selectall: {
    type: Boolean,
    default: () => false,
  },
});
const deflist = ref({});
watch(
  () => props.list,
  (value) => {
    setDefList();
  }
);

// watch(
//   () => deflist,
//   () => {
//     nextTick(() => instance.proxy.$forceUpdate());
//   }
// );

onMounted(() => {
  setDefList();
});
const setDefList = () => {
  if (Array.isArray(props.list))
    deflist.value = props.list.map((v) => {
      v.isgroup = (v.children?.length ?? 0) > 0;
      return v;
    });
};
</script>

<style scope>
.select-group .el-select-dropdown__item {
  text-align: left;
}

.select-group .el-select-group__title {
  font-weight: 700;
  color: #000;
  font-size: 12px;
}
</style>
